<template>
  <div v-if="isVisible" class="video-call-popup">
    <div class="video-display">
      <!-- 视频显示区域 -->
    </div>
    <div v-if="isCalling" class="calling-status">
      <p>正在拨打中...</p>
    </div>
    <div v-if="!isCalling &&!isCallConnected" class="call-options">
      <a-button @click="answer" class="call-button">接通</a-button>
      <a-button @click="reject" class="call-button">拒绝</a-button>
    </div>
    <div v-if="isCallConnected" class="call-connected">
      <div class="call-duration">{{ callDuration }}</div>
      <div class="time-info">
        <div>我的时间（{{ currentUsername }}）: {{ localTime }}</div>
        <div>对方时间: {{ otherTime }}</div>
      </div>
      <a-button @click="hangUp" class="call-button">挂断</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 接收来自父组件的是否显示视频通话窗口和是否正在拨打的 props
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false
  },
  isCalling: {
    type: Boolean,
    default: false
  },
  currentUsername: {
    type: String,
    default: ''
  },
  localStream: {
    type: Object,
    default: null
  }
});

// 定义要触发的事件
const emit = defineEmits(['answer', 'reject', 'hangUp', 'update:isVisible']);

// 视频通话相关变量
const isCallConnected = ref(false);
const callDuration = ref('00:00');
const localTime = ref('');
const otherTime = ref('');
let callTimer;

// 获取用户所在时区的时间
const getUserTimeZoneTime = () => {
  const now = new Date();
  const options = {
    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  };
  return now.toLocaleString(undefined, options);
};

// 监听时间变化，更新本地时间和对方时间（假设对方时区固定，这里只是示例）
onMounted(() => {
  setInterval(() => {
    localTime.value = getUserTimeZoneTime();
    // 假设对方时区是 UTC+8，这里只是示例，需要根据实际情况调整
    const otherDate = new Date(new Date().getTime() + 8 * 60 * 60 * 1000);
    const otherOptions = {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    };
    otherTime.value = otherDate.toLocaleString(undefined, otherOptions);
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(callTimer);
});

// 接通视频通话
const answer = () => {
  isCallConnected.value = true;
  callTimer = setInterval(() => {
    const duration = new Date(callDuration.value);
    duration.setSeconds(duration.getSeconds() + 1);
    callDuration.value = duration.toISOString().slice(11, 16);
  }, 1000);
  emit('answer');
};

// 拒绝视频通话
const reject = () => {
  isCallConnected.value = false;
  callDuration.value = '00:00';
  clearInterval(callTimer);
  // 触发父组件的 reject 事件
  emit('reject');
  // 隐藏视频通话窗口，通知父组件更新状态
  emit('update:isVisible', false); 
};

// 挂断视频通话
const hangUp = () => {
  isCallConnected.value = false;
  callDuration.value = '00:00';
  clearInterval(callTimer);
  // 触发父组件的 hangUp 事件
  emit('hangUp');
  // 隐藏视频通话窗口，通知父组件更新状态
  emit('update:isVisible', false); 
};
</script>

<style scoped>
.video-call-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 600px; /* 增大悬浮窗宽度 */
  height: 400px; /* 增大悬浮窗高度 */
  display: flex;
  flex-direction: column;
}

.video-display {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.video-display video {
  max-width: 100%;
  max-height: 100%;
}

.calling-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.call-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.call-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.call-connected {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.call-duration {
  font-size: 18px;
  font-weight: bold;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}
</style>